<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		      .html()       无参---功能：获取匹配元素中第一元素
			                有参---功能：将匹配元素集合中所有元素替换为新元素
			特点：针对  内容   +元素
			.val()          无参---功能：表单内元素：input\select生效
			                             获取表单元素中第一元素的内容
			                无参---功能：表单内元素：input\select生效
			                    input元素直接显示、value
			                    select元素不直接显示 value
								option 元素中内容：用户显示
								option 元素中value值，
								必须当前select中，option元素value值
								直接复制：打印select元素对象名称[object Object]
			 特点：针对 （表单内form元素可以包裹） 元素的内容
									
			.text()          无参---功能:获取元素集合中所有元素的文本内容
			                 有参---功能:   【设置】匹配元素集合中所有元素的文本
							               内容替换
		    特点：元素中存在内容
			  -->
			  <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本真实数据1"/>
		<input type="text" value="文本真实数据2" placeholder="输入框显示效果[提示]"/>
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem1">lorem2</option>
			<option value="rem1">lorem3</option>
		</select>
			<h1>text()函数使用</h1>
			<button class="btn1">按钮-针对text()函数-无参</button>
			<button class="btn2">按钮-针对text()函数-有参</button>
			<p>lorem4</p>
			<p>lorem5</p>
			<p>lorem6</p>
			<script>
				//1.找到 类名为 btn1  的按钮--点击--弹窗内容为 三个 p元素内容【无参】
				$(".btn1").click(function(){
					var ptext=$("p").text();
					alert(ptext);
				});
				//2.找到 类名为 btn1  的按钮--点击---lorem4|5|6 改成"修改文本"【有参】
				$(".btn2").click(function(){
					$("p").text("修改文本");
					
				});
				
				
			</script>
		
		<script>
		          //  $("button").click(function(){
		                //设置元素第一个的值  1.直接设置下拉列表中的value值
		             //   $("select").val("rem5");
		                //设置元素第一个的值  2.给第一个值添加，设置内容
		             //   var rem=$("select").val();
		                
		                
		                
		                //[object Object] JavaScript中 对象的默认字符串表示形态
		                //select元素 对象 输出[object Object]
		                
		                
		                //value的值：真实数据  option中值：显示数据
		                //object Object  测试  无参
		           //     alert("val()函数有参："+rem)
		            });
		            //动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
		            /* $("button").click(function(){
		                /* 注意：js变量名不可以为关键字！    in是关键字 */
		        //        var ins=$("input").val();
		        //        alert("val()函数无参："+ins)
		        //    }); */
		            
		            //有参：点击按钮--下面有两个span  改成 lorem、lorem
		        //    $("button").click(function(){
		        //        $("span").html("<span>lorem</span>")
		        //    });
		            
		            //js变量【var i=1】==jq变量    var   变量名=值、元素
		            //无参数     html()函数使用
		            /* var html=$("span").html();
		            //BOM方式  打印数据
		            alert("无参数获取第一个元素内容："html); */
		        </script>
			</body>
			</html>